<template>
  <div class="tag">
    <el-tag 
        v-for="(tag, index) in tags" 
        :key="tag.id" 
        :closable="tag.name !== 'Index'"
        :effect="$route.name === tag.name ? 'dark' : 'plain'"
        @click="changeMenu(tag)"
        @close="handleClose(tag, index)"
        >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState,} from "vuex";
export default {
  name: "BackTag",
  computed: {
    // 获取vuex中的 menu数组
    ...mapState({
      tags: (state) => state.BreadCrumbs.menuList,
    }),
  },
  methods: {
    changeMenu(tag){
      // console.log(tag)
        // 点击通过名字路由
        this.$router.push({
            // name: tag.name
            path: tag.path
        })
    },
    handleClose(tag, index) {
      // console.log(this.$store)
        // 面包屑数据的总长度
        const length=this.tags.length-1
        // 关闭点击的页面面包屑
          this.$store.commit('BreadCrumbs/CloseTag',tag);
        // 焦点不在当前页面时
        if (tag.path !== this.$route.path) {
          return;
        }
        // 焦点在最后一个页面
        if (index == length) {
          this.$router.push({
            name: this.tags[index-1].name
          })
          // 焦点在中间
        } else {
          this.$router.push({
            name: this.tags[index].name
          })
        }
        
      },
  }

};
</script>

<style scoped>
.tag {
  border-bottom: 2px solid #bbb0b0;
  padding: 3px 0;
  /* 阴影 */
  box-shadow: 0 1px 10px #dcc9c9;
}
.tag>span {
    margin-left: 12px;
    /* 经过有小手 */
    cursor: pointer;
}
</style>